<template>
  <h2>用户信息</h2>
  <p>姓名：{{ userInfo.name }}</p>
  <p>性别：{{ userInfo.sex }}</p>
  <p>薪资：{{ userInfo.job.web.salary }}K</p>
  <p>车辆：{{ userInfo.car }}</p>
  <p>
    <button @click="updateName">修改姓名</button>
    <button @click="updateSalary">修改薪资</button>
    <button @click="toRawData">输出原始数据</button>
    <button @click="addCar">添加一辆车</button>
    <button @click="updateCar">更换一辆车</button>
  </p>
</template>

<script>

import {reactive, toRaw, markRaw} from "vue";

export default {
  name: "Demo",
  setup() {

    let userInfo = reactive({
      name: '米色',
      sex: '男',
      job: {
        web: {
          salary: 10
        }
      }
    })

    const updateName = () => {
      userInfo.name += '-'
    }

    const updateSalary = () => {
      userInfo.job.web.salary += 1
    }

    const toRawData = () => {
      // toRaw 把响应式数据转化为原始数据
      console.log("原始数据", toRaw(userInfo))
      console.log("响应式数据", userInfo)
    }

    const addCar = () => {
      // 如果car数据非常复杂，我们并不需要响应式，
      // 因为数据响应式数据会大大降低页面渲染数据
      userInfo.car = markRaw({name: '红旗', price: 500})
    }

    const updateCar = () => {
      userInfo.car.price += 10
    }

    return {
      userInfo,
      updateName,
      updateSalary,
      toRawData,
      addCar,
      updateCar
    }
  }
}
</script>

<style scoped>

</style>